<!--
 * @Author: Shber
 * @Date: 2024-06-28 10:53:37
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-10 14:46:51
 * @Description: 
-->
<template>
<view class="list_item">
  <view class="item_top" @click="goPath('/pages/order/detils')">
    <view class="flex_y_center flex_y_center1">
      <my-icon :fontSize="72" color="#78ADC5" name="myicon-waimai-e630"/>
      <view class="ml_5">
        <text class="top_p1">同城配送</text>
        <text class="top_p2">立即送达</text>    
      </view>
    </view>
    <tm-icon :fontSize="28" color="#404040" name="tmicon-angle-right"></tm-icon>
  </view>
  <view class="item_centent">
    <view class="item_text">
      <view class="text_copy flex_x_between_y_center">
        <view class="flex_y_center" @click="onCopy('33327369101832')">
          <text class="text">订单号：33327369101830 </text>
          <my-icon :fontSize="32" color="#333" name="myicon-fuzhi-e8b0"/>
        </view>
        <text class="text">待发货</text>
      </view>
      <view class="text_name fw_500 flex_x_between_y_center mt_10">王老二 17623455432 
        <my-icon :fontSize="60" color="#333" name="myicon-printer-e617"/>
      </view>
      <view class="flex_y_center mt_10">
        <text class="flex_1">类型：加盟商采购</text>
        <text class="flex_1">日期：2023-11-06</text>
      </view>
      <view class="flex_y_center mt_10">
        <text class="flex_1">商品15件</text>
        <text class="flex_1">金额：400元</text>
      </view>
    </view>
    <view class="btn_group flex_x_between_y_center mt_16">
      <tm-button :shadow="0" :transprent="true" :round="25" outlined label="修改订单"></tm-button>
      <tm-button :shadow="0" :round="25" label="发货"></tm-button>
    </view>
  </view>

</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import myIcon from '@/components/MyIcon/index.vue'
import tools from '@/utils/tools'
  const customStyle = computed(() => ({
    height: '80rpx',
    width: '300rpx',
  }));

  const onCopy = (text)=>{
    tools.copy(text)
  }

  const goPath = (_url)=>{
    uni.navigateTo({ url: _url });
  }
</script>

<style scoped lang="scss">
.list_item{margin-bottom: 10px; background-color: #fff;}
.item_top{
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: #E5F4FB;
  padding: 8px 15px;
}
.top_p1{color: #333333; font-size: 14px; font-weight: 400; display: flex;}
.top_p2{color: #999999; font-size: 12px;}
.item_centent{padding: 12px 16px 16px;}
.item_text{
  .text_copy, .text{font-size: 12px; color: #999999;}
  .text_name{font-size: 16px;}
  .flex_1{flex: 1; font-size: 12px; color: #666666;}
}
.btn_group{border-top: 1px solid #EFEFEF; padding-top: 10px;}
.flex_x_between_y_center{display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.flex_y_center{display: flex; flex-direction: row; align-items: center;}
.flex_y_center1{align-items: flex-start;}
</style>
